<template>
    <div class="carousel-card">
        <div :data-back="item.game_banner_img ? $baseUrl + item.game_banner_img : 'https://www.yyfuns.com/static/default_banner.png'" class="carousel-card-item" v-for="item in banner_list" :key="item.id" @click="$router.push('/home/gameCenter/'+item.id)">
          <img :src="$baseUrl+item.home_banner_img">
        </div>
        <div v-if="banner_list.length < 3" :data-back="'https://www.yyfuns.com/static/default_banner.png'" class="carousel-card-item">
          <img src="../../assets/devlog.png" >
          <!-- <h1 style="position: absolute;color: #494949;">Stay tuned for more games</h1> -->
        </div>
    </div>
</template>

<script setup>
import CarouselCard from "@/hooks/lunbo.js"
import { onMounted,reactive,onBeforeUnmount } from 'vue';
import axios from '@/utils/api'
// import {baseUrl} from '@/baseUrl';
// const props = defineProps(['banner_list'])
const banner_list = reactive([])
// const banner_list = props.banner_list
// console.log(banner_list,'555');

const getHomeBannerList = async () =>{
    const banner = await axios.get('/gameBannerList')
    Object.assign(banner_list,banner.data)
    // console.log(banner);
}

    
let cd = ''
onMounted(async()=>{
  await getHomeBannerList()
  cd = new CarouselCard()
  cd.start()
})

onBeforeUnmount(() => {
  cd.stop()
});


    
</script>

<style lang="less" scoped>
 * {
      padding: 0;
      margin: 0
    }

    .carousel-card:hover .arrow{
      display: flex;
    }
    .carousel-card {
      margin-top: 50px;
      height: 400px
    }

    .carousel-card-item {
      /* background: blue; */
      border-radius: .5vw;
      overflow: hidden;
      cursor: pointer;
    }

    .carousel-card-item img {
      width: 980px;
      height: 300px;
      border-radius: 10px;
    }
    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      font-size: 16px;
      padding: 10px 20px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .carousel-btn:hover {
      opacity: 1;
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }
    .carousel-card {
      position: relative;
      transform-style: preserve-3d;
      min-height: 50vh;
      perspective: 1000px
    }
    .carousel-card > .carousel-card-item {
      position: absolute;
      width   : 60%;
      height  : calc(100% - 4vw);
      display : flex;
      justify-content : center;
      align-items : center;
      transition : .5s cubic-bezier(0.075, 0.82, 0.165, 1)
    }
    .carousel-card > .carousel-card-item.c-left {
      left: 2vw;
      z-index: 3;
      /* transform: rotateY(20deg) scale(.85); */
      transform: scale(0.85, 0.75);
      filter: blur(1.5px)
    }
    .carousel-card > .carousel-card-item.c-lefted {
      left: 2vw;
      z-index: 2;
      transform: rotateY(20deg) scale(.7);
      filter: blur(2px)
    }
    .carousel-card > .carousel-card-item.c-active {
      width: 1000px;
      left: 50%;
      transform: translateX(-50%) translateZ(50px);
      z-index: 10;
      img{
        width: 960px;
        box-shadow: 1px 3px 10px 3px rgba(0, 0, 0, 0.5);
      }
    }
    .carousel-card > .carousel-card-item.c-right {
      right: 2vw;
      z-index: 3;
      /* transform: rotateY(-20deg) scale(.85); */
      transform: scale(0.85, 0.75);
      filter: blur(1.5px)
    }
    .carousel-card > .carousel-card-item.c-righted {
      right: 2vw;
      z-index: 2;
      transform: rotateY(-20deg) scale(.7);
      filter: blur(2px)
    }
    .carousel-card-item.c-more {
      width: 45%;
      left: 50%;
      transform: translateX(-50%)
    }
    .carousel-card ul {
      position: absolute;
      bottom: 5vw;
      left: 50%;
      padding: .05vw;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2vw;
      transform: translateX(-50%) translateZ(60px)
    }
    .carousel-card ul > li {
      width: .7vw;
      height: .7vw;
      background: white;
      border: solid .05vw white;
      border-radius: 50%;
      cursor: pointer;
      transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    }
    .carousel-card ul > li.dot-active, .carousel-card ul > li:hover {
      width: 2vw;
      height: .7vw;
      border-radius: .35vw;
      background: #007aff;
    }
    .card_ul{
        position: absolute;
        bottom: 5vw;
        left: 50%;
        padding: .05vw;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2vw;
        transform: translateX(-50%) translateZ(60px)
    }

</style>